<template>
	<div class="wrapper">
		<!-- 用户信息栏 -->
		    <div class="user-header">
		      <div class="avatar-box">
		        <span class="avatar">👤</span>
		        <div class="user-meta">
		          <h2>{{ user.userName }}</h2>
		          <button class="edit-btn" @click="tochange">修改信息</button>
		        </div>
		      </div>
		    </div>
		
		    <!-- 核心功能入口 -->
		    <div class="function-grid">
		      <div class="func-card" @click="$router.push('/hongbao')">
		        <div class="icon-box red">
		          <span class="icon">🎁</span>
		        </div>
		        <h3>红包中心</h3>
		      </div>
			  <div class="func-card" @click="$router.push('/chongbao')">
			    <div class="icon-box red">
			      <span class="icon">🎁</span>
			    </div>
			    <h3>创建红包</h3>
			  </div>
			  <div class="func-card" @click="$router.push('/myreview')">
			    <div class="icon-box red">
			      <span class="icon"></span>
			    </div>
			    <h3>评价管理</h3>
			  </div>
		      <div class="func-card" @click="$router.push('/credit')">
		        <div class="icon-box blue">
		          <span class="icon">⭐</span>
		        </div>
		        <h3>积分账户</h3>
		      </div>
		      <div class="func-card" @click="$router.push('/virtualWallet')">
		        <div class="icon-box green">
		          <span class="icon">💰</span>
		        </div>
		        <h3>虚拟钱包</h3>
		      </div>
		    </div>
		
		    <!-- 系统功能入口 -->
		    <div class="system-actions">
		      <button class="sys-btn" @click="tologin">
		        <span class="icon">🏪</span>
		        商家登录
		      </button>
		      <button class="sys-btn" @click="todlogin">
		        <span class="icon">🏍️</span>
		        骑手登录
		      </button>
		      <button class="sys-btn logout" @click="logout">
		        <span class="icon">🚪</span>
		        退出登录
		      </button>
		    </div>
		<Footer></Footer>
	</div>
</template>

<script>
	import Footer from '../components/Footer.vue';
	export default {
		name: 'mine',
		data() {
			return {
				user: {} // 存储用户信息
			}
		},
		created() {
			this.user = this.$getSessionStorage('user');
		},
		components: {
			Footer
		},
		methods: {
			tologin() {
				this.$router.push({
					path: '/businessLogin'
				});
			},
			todlogin() {
				this.$router.push({
					path: '/DeliveryManLogin'
				});
			},
			tochange() {
				this.$router.push({
					path: '/changepassword'
				});
			},
			logout() {
				// 清除 localStorage 或 sessionStorage 中的用户数据
				sessionStorage.removeItem('user');

				alert('已退出登录');

				// 重定向到登录页面
				this.$router.push({
					path: '/login'
				});
			}
		}
	}
</script>

<style scoped>
.wrapper {
  padding: 20px;
  min-height: 100vh;
}

/* 用户信息样式 */
.user-header {
  background: #ffffff;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.avatar-box {
  display: flex;
  align-items: center;
  gap: 15px;
}

.avatar {
  font-size: 40px;
  background: #f8f9fa;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-meta h2 {
  margin: 0;
  color: #333;
  font-size: 22px;
}

.edit-btn {
  background: #f0f2f5;
  color: #606266;
  border: none;
  border-radius: 18px;
  padding: 6px 15px;
  margin-top: 8px;
}

/* 核心功能入口 */
.function-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-bottom: 30px;
}

.func-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s;
}

.func-card:hover {
  transform: translateY(-3px);
}

.icon-box {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.red { background: #ffebee; color: #f56c6c; }
.blue { background: #ecf5ff; color: #409eff; }
.green { background: #f0f9eb; color: #67c23a; }

/* 系统功能按钮 */
.system-actions {
  display: grid;
  gap: 12px;
  margin-top: 30px;
}

.sys-btn {
  width: 100%;
  padding: 14px;
  background: #ffffff;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.sys-btn.logout {
  color: #f56c6c;
  border-color: #fde2e2;
}

.icon {
  font-size: 20px;
}

@media (max-width: 480px) {
  .function-grid {
    grid-template-columns: 1fr;
  }
}
</style>
